<template>
  <div class="app-container">
    <div class="card">
      <div class="header">
        <span style="line=height:32px">角色</span>
      </div>
      <div class="card-item scroll">
        <el-radio-group v-model="rolesId" @change="changGet()">
          <div v-for="role in rolesList" :key="role.id" class="item">
            <el-radio :label="role.id">
              <span style="font-size:12px">{{ role.roleName }}</span>
              <span style="padding-left:10px">
                <el-tag v-if="role.roleAuthType=='web'" type="danger" size="mini">后台角色</el-tag>
                <el-tag v-else type="warning" size="mini">前端角色</el-tag>
              </span>
            </el-radio>
          </div>
        </el-radio-group>
      </div>
    </div>
    <div class="card">
      <div class="header">
        <span>功能</span>
        <el-button type="primary" size="small" @click="save()">授权</el-button>
      </div>
      <div class="card-item scroll">
        <el-tree ref="tree" :data="permissionsList" show-checkbox default-expand-all node-key="id" :props="defaultProps" :expand-on-click-node="false">
          <span slot-scope="{ node, data }">
            <span style="font-size: 12px;">{{ node.label }}</span>
            <span style="padding-left:10px">
              <el-tag v-if="data.permissionType=='menu'" type="warning" size="mini">菜单</el-tag>
              <el-tag v-else type="danger" size="mini">按钮</el-tag>
            </span>
          </span>
        </el-tree>
      </div>
    </div>
  </div>
</template>
<script>
import { getRoles, getPermissions, getPermissionbyRolecondition, addUpdatePermissons } from '@/api/permissions'
export default {
  data() {
    return {
      rolesList: [],
      rolesItem: [],
      rolesId: '',
      permissionsList: [],
      defaultProps: {
        children: 'children',
        label: 'permissionName'
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      const params = {
        page: 1,
        pageSize: 9999
      }
      getRoles(params).then(res => {
        this.rolesList = res.data.row.map(item => ({ id: item.id, roleName: item.roleName, roleCode: item.roleCode, roleAuthType: item.roleAuthType }))
      })
      getPermissions({
        page: 1,
        pageSize: 9999,
        status: 1
      }).then(res => {
        const dataArr = res.data.row.map(item => ({ authPid: item.authPid, permissionName: item.permissionName, id: item.id, permissionType: item.permissionType }))
        const result = dataArr.reduce((prev, next) => {
          prev[next.authPid] ? prev[next.authPid].push(next) : prev[next.authPid] = [next]
          return prev
        }, {})

        Object.keys(result).map(key => {
          result[key].map((item, i) => {
            result[item.id] ? item.children = result[item.id] : ''
          })
        })
        this.permissionsList = result[0]
      })
    },
    changGet() {
      getPermissionbyRolecondition({ roleId: this.rolesId }).then(res => {
        console.log(res.data)
        const keys = res.data.map(res => (res.id))
        this.$refs.tree.setCheckedKeys(keys)
      })
    },
    save() {
      const keys = this.$refs.tree.getCheckedKeys().join(',')
      addUpdatePermissons({ id: this.rolesId, permissionStrs: keys }).then(res => {
        if (res.code * 1 === 200) {
          this.$message({
            message: `授权成功`,
            type: 'success',
            showClose: true
          })
        }
      })
    }
  }
}
</script>
<style>
.el-tree-node__content {
  height: 36px;
}
</style>
<style lang="scss" scoped>
.app-container {
  display: flex;
}
.card {
  margin: 20px;
  flex: 1;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  .header {
    padding: 18px 20px;
    border-bottom: 1px solid #ebeef5;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .card-item {
    width: 100%;
    padding: 18px 20px;
    flex: 1;
  }
}

.item {
  padding: 10px 0;
}
</style>

